<template>
    <div class="box">
        <!-- 登录/注册页面 -->
        <h1>Hi~欢迎来到豆果美食，会做饭很酷~</h1>
        <div class="inp">
       
            <input type="text" placeholder="用户名" v-model="username">
           
            <input type="password" placeholder="密码" v-model="userword">
            <input type="password" placeholder="确认密码" v-model="userwordtow">
        </div>
        <button class="gouser" @click="gouser">登录/注册</button>

    </div>
</template>

<script>
export default {
    data(){
        return{
            username:'',
            userword:'',
            userwordtow:''
        }
    },
    methods:{
        gouser(){
            let userwordtow =this.userwordtow
            let userword =this.userword
            console.log(userwordtow,userword);
            
            if(this.userword!=""&&this.username!=""&&this.userwordtow!=''&&userwordtow==userword){
                let arr = []
                let obj = {
                    userword:this.userword,
                    username:this.username
                }
                arr.push(obj)
                localStorage.setItem("user",JSON.stringify(arr))
                this.$router.push({path:'/user'})
            }else{

            }
           
        }
    }
}

</script>


<style lang="less" scoped>
.gouser{
    width: 50%;
    height: 30px;
    border-radius: 20px;
    background-color: rgb(248, 212, 7);
}
.box{
    width: 100%;
    text-align: center;
    h1{
        font-size: 20px;
        margin: 30px auto
    }
    .inp{
        margin: auto;
        margin-left: 25px;
        width: 80%;
        display: flex;
        flex-direction: column;
        input{
            padding: 0 10px;
            border-radius: 5px;
            width: 100%;
            height: 40px;
            margin: 20px auto;
            border: transparent;
            border-bottom: 3px solid #ccc;
        }
    }
}

</style>